<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form表注册</title>
</head>
<style>
    form {
        width: 400px;
        margin: auto;
    }
</style>

<body>
    <form action="" id="register">
        <fieldset>
            <legend>
                <h1>注册</h1>
            </legend>
            <p>
                <input type="text" name="username" placeholder="用户名">
                <span id='usernamemsg'></span>
            </p>
            <p>
                <input type="text" name="password" placeholder="密码">
                <span id='passwordmsg'></span>
            </p>
            <p>
                <input type="text" name="email" placeholder="电子邮箱">
                <span id='emailmsg'></span>
            </p>
            <p>
                <input type="button" onclick="fun()" value="提交">
            </p>
        </fieldset>
    </form>
    <script src='./valid.js'></script>
    <script>
        function fun() {
            valid({
                el: 'register',
                rules: {
                    'username': {
                        
                        reg: /^[a-zA-Z]{6,50}$/,
                        message: '用户名必须6-50个字符间',
                        messageTag: 'usernamemsg'
                    },
                    'password': {
                        reg: /^.{6,18}$/,
                        message: '密码必须6-18字符间',
                        messageTag: 'passwordmsg'
                    },
                    'email': {
                        reg: /^\w+@\w+\.(com)|(net)|(cn)$/,
                        message: '邮箱格式非法',
                        messageTag: 'emailmsg'
                    }

                }

            })
        }
    </script>
</body>

</html>